<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="icon" href="../images/png/logo.png" type="image/png">
    <title>绑定内联样式</title>
    <script src="../vue.js"></script>
</head>
<body>
    <div id="app-1" :style="{color: activeColor, fontSize: fontSize + 'px'}">
        <p>驼峰命名</p>
    </div>

    <div id="app-2" :style="styleObject">
        <p>绑定样式对象</p>
    </div>

    <div id="app-3" :style="[baseStyle, overridingStyle]">
        <p>数组语法</p>
    </div>

    <div :style="{display:['-webkit-box', '-ms-flexbox', 'flex']}">多重值</div>
    <script>

        // 对象语法
        var vm1 = new Vue({
            el: '#app-1',
            data: {
                activeColor: 'red',
                fontSize: 30
            }
        })

        var vm2 = new Vue({
            el: '#app-2',
            data: {
                styleObject: {
                    color: 'red',
                    fontSize: '18px'
                }
            }
        })

        // 数组语法
        var vm3 = new Vue({
            el: '#app-3',
            data: {
                baseStyle: {
                    color: 'blue'
                },
                overridingStyle: {
                    fontSize: '24px'
                }
            }
        })
    </script>
</body>
</html>